<template>
	<view class="page">
		<view class="part">
			<view class="list">
				<view class="label">手机号：</view>
				<input class="input" type="number" v-model="customer_mobile" @blur="getBeforInfo" placeholder="请输入11位数字">
			</view>
			<view class="list">
				<view class="label">*客户：</view>
				<input class="input" type="text" v-model="customer_name" placeholder="姓名">
			</view>
			<view class="list">
				<view class="label">人数：</view>
				<input class="input" type="number" v-model="customer_number" placeholder="请输入客户人数">
			</view>
		</view>
		<view class="part">
			<view class="list">
				<view class="label">楼盘名称：</view>
				<input class="input" type="text" @blur="getAddress" v-model="property_name" placeholder="请输入楼盘名称">
			</view>
			<view class="list">
				<view class="label">楼盘地址：</view>
				<input class="input" type="text"  v-model="property_address"  placeholder="请输入楼盘地址">
			</view>
		</view>
		<view class="part">
			<view class="list">
				<view class="label">*供应商：</view>
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input">{{array[index]}}</view>
				</picker>                        
			</view>
			<view class="list" style="font-size: 12px;">地址：{{address_arr[index].address}}</view>
			<view class="list">
				<view class="label">*到访日：</view> 
				<picker mode="date" :value="date" :start="startDate" @change="bindDateChange">
				     <view class="uni-input">{{date}}</view>
				 </picker>
			</view>
			<view class="list">
				<view class="label">具体时间：</view>
				<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
				<view class="uni-input">{{time}}</view>
				</picker>                                             
			</view>
		</view>
		<view class="part mark-box">
			<view class="mark">备注信息</view>
			<textarea class="textarea" v-model="remark" placeholder="非必填,请输入您的备注信息!" />
		</view>
		<view class="btn-box">
			<button class="submit-btn" @click="submitHandle">提交报备</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
			 format: true
			 })       
			return {
				array: [],
				address_arr:[],
				index: 0,
				date:'',
				time: '',
				customer_mobile:'',
				customer_name:'',
				customer_number:1,
				property_name:'',
				property_address:'',
				remark:'',
				user_id:0
			}
		},
		onLoad(e) {
			this.user_id = e.id,
			this.getSupplier();
		},
		computed: {
		       startDate() {
		           return this.getDate('start');
		       }
		   },
		methods: {
			 bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
			     this.index = e.target.value
			 },
			bindDateChange: function(e) {
			            this.date = e.target.value
			 },
			  bindTimeChange: function(e) {
				this.time = e.target.value
			},           
			getDate(type) {
			            const date = new Date();
			            let year = date.getFullYear();
			            let month = date.getMonth() + 1;
			            let day = date.getDate();
			
			            if (type === 'start') {
			                year = year - 0;
			            } else if (type === 'end') {
			                year = year + 2;
			            }
			            month = month > 9 ? month : '0' + month;;
			            day = day > 9 ? day : '0' + day;
			            return `${year}-${month}-${day}`;
			},	
			getAddress(){
				var self = this;
				if(self.property_name==null||self.property_name==''){
					
				}else{
					var ls = new BMap.LocalSearch("成都市");
					   ls.search(self.property_name);
					   ls.setSearchCompleteCallback(function(rs){
					        console.log(rs.Ir[0].address);
							self.property_address = rs.Ir[0].address;
							console.log(self.property_address)
					   });
				}
				 
			},
			submitHandle(){
				var self = this;
				if(self.customer_mobile!==''&&self.customer_mobile.length<11){
					uni.showToast({
						title:'请填写正确的手机号~',
						icon:"none",
						duration:2000
					})
					return false;
				}
				if(self.customer_name==''||self.customer_name==null){
					uni.showToast({
						title:'请填写客户姓名~',
						icon:"none",
						duration:2000
					})
					return false;
				}
				if(self.customer_number==null||self.customer_number==''){
					self.customer_number = 1;
				}
				// if(self.property_name==null||self.property_name==''){
				// 	uni.showToast({
				// 		title:'请填写楼盘名称~',
				// 		icon:"none",
				// 		duration:2000
				// 	})
				// 	return false;
				// }
				// if(self.property_address==null||self.property_address==''){
				// 	uni.showToast({
				// 		title:'请填写楼盘地址~',
				// 		icon:"none",
				// 		duration:2000
				// 	})
				// 	return false;
				// }
				if(self.date==null||self.date==''){
					uni.showToast({
						title:'请选择日期~',
						icon:"none",
						duration:2000
					})
					return false;
				}
				// if(self.time==null||self.time==''){
				// 	uni.showToast({
				// 		title:'请选择时间~',
				// 		icon:"none",
				// 		duration:2000
				// 	})
				// 	return false;
				// }
				var data = {
					reportor_id:self.user_id,
					customer_mobile:self.customer_mobile,
					customer_name:self.customer_name,
					customer_number:self.customer_number,
					property_name:self.property_name,
					property_address:self.property_address,
					property_address:self.property_address,
					supplier_id:self.address_arr[self.index].id,
					visit_date:self.date,
					visit_hour:self.time,
					remark:self.remark,
					
				}
				uni.showModal({
				    title: '请确认信息',
				    content: '请确认本次信息无误，并提交报备信息',
					confirmText:'确定无误',
					cancelText:'返回修改',
				    success: function (res) {
				        if (res.confirm) {
				            uni.showLoading({
				                title: '请稍后'
				            });
							self.$request.request({
								url:'/report/create',
								data:data,
								success:function(res){
									if(res.code==200){
										uni.hideLoading();
										uni.showToast({
											title:res.msg,
											icon:"none",
											duration:2000
										})
										if(res.msg=="报备单录入成功！"){
											setTimeout(function(){
												uni.redirectTo({
												    url: '../add-report-success/add-report-success?id='+self.user_id
												});
											},2000)
										}
										
									}else{
										
									}
								}
							});
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			getBeforInfo(){
				var self = this;
				if(self.customer_mobile.length==11){
					self.$request.request({
						url:'/report/mobile',
						data:{
							customer_mobile:self.customer_mobile
						},
						success:function(res){
							if(res.code==200){
								var  y = res.result;
								console.log(y)
								if(y.length==0) return;
								self.customer_name = y.customer_name;
								self.customer_number = y.customer_number;
								self.property_address = y.property_address;
								self.property_name = y.property_name;
								self.remark = y.remark;
								// self.date = y.visit_date;
								// self.time = y.visit_hour;
								self.address_arr.forEach((item,index1)=>{
									if(item.id==y.supplier_id){
										self.index = index1
									}
								})
							}else{
								
							}
						}
					});
				}
			},
			getSupplier(){
				var self = this;
				self.$request.request({
					url:'/report/supplier',
					success:function(res){
						if(res.code==200){
							var  y = res.result;
							console.log(y)
							y.forEach(item=>{
								self.array.push(item.short_name)
							})
							self.address_arr = y;
						}else{
							
						}
					}
				});
			},
		}
	}
</script>

<style scoped>
.page{
	width: 100%;
	min-height: 100vh;
	box-sizing: border-box;
	background-color: #FFFFFF;
	padding-top: 40upx;
}
.tit{
	font-size: 14px;
	font-weight: bold;
	border-bottom: 1px solid #f6f6f6;
	padding-left: 20upx;
}
.mark{
	font-size: 14px;
	font-weight: bold;
	padding-left: 20upx;
}
.mark-box{
	/* border-top: 10px solid #f6f6f6; */
}
.part{
	width: 750upx;
	margin: 0 auto;
	background-color: #FFFFFF;
	border-radius: 10upx;
	box-sizing: border-box;
	padding: 0 40upx;
	
}
.list{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	padding-left: 20upx;
	align-items: center;
	margin-top: 10upx;
	margin-bottom: 10upx;
}
.input,.uni-input{
	width: 480upx;
	height: 60upx;
	line-height: 45upx;
	padding-left: 20upx;
	background-color: #FFFFFF;
	border-bottom: 1px solid #e6e6e6;
	font-size: 14px;
	box-sizing: border-box;
}
.label{
	display: inline-block;
	width: 168upx;
	font-size:14px;
	font-weight: bold;
}
.textarea{
	width: calc(100% - 40upx);
	margin-top: 20upx;
	margin-left: 20upx;
	height: 160upx;
	background-color: #F6F6F6;
	border-radius: 10upx;
	box-sizing: border-box;
	padding: 10upx;
	font-size: 14px;
}
.btn-box{
	padding: 40upx;
	text-align: center;
}
.submit-btn{
	width: 420upx;
	height: 90upx;
	background-color: #859dc2;
	color: #FFFFFF;
	font-size: 16px;
	border-radius: 90upx;
	line-height: 90upx;
}
</style>
